<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="全部" name="all">全部: {{ count }}</el-tab-pane>
    <el-tab-pane label="未完成" name="not-complete">未完成: {{ count }}</el-tab-pane>
    <el-tab-pane label="已完成" name="completed">已完成: {{ count }}</el-tab-pane>
  </el-tabs>
</template>

<script setup>
  import { ref } from 'vue';

  defineProps({
    count: {
      type: Number,
      required: true
    }
  })
  const emit = defineEmits(['filter-todo'])
  const activeName = ref('all')
  const handleClick = (tab, event) => {
    // console.log(tab, event)
    console.log(tab.paneName)
    emit('filter-todo', tab.paneName)
  }
</script>
